<template>
	<!-- 为你推荐 -->
	<view class="hot-goods u-m-b-10 u-p-x-16" style="margin-top: 40rpx;">
		<view class="sh-title-card u-m-b-10">
			<view class="title-box">
				<image class="title-bg" src="https://file.shopro.top/imgs/title2.png" mode="aspectFill"></image>
				<view class="title-text" style="color:#000000"> {{title}} </view>
			</view>
		</view>
		<view class="u-waterfall">
			<view id="u-left-column" class="u-column">
				<view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="leftGoods in leftList">
					<ljshop-goods-card :detail="leftGoods" :type="leftGoods.activity_type" :image="leftGoods.img"
						:title="leftGoods.name" :subtitle="leftGoods.caption?leftGoods.caption:''" :price="leftGoods.price"
						:originPrice="((leftGoods.price-leftGoods.cost)*leftGoods.rebate/100).toFixed(2)"
						:sales="leftGoods.sales" 
						@click="$Router.push({ path: '/pages/goods/detail', query: { id: leftGoods.id } })"
						v-if="leftGoods.type!='EXCHANGE'">
					</ljshop-goods-card>
				</view>
			</view>
			<view id="u-right-column" class="u-column">
				<view class="goods-item  u-m-b-16 u-flex u-row-center u-col-center" v-for="rightGoods in rightList">
					<ljshop-goods-card :detail="rightGoods" :type="rightGoods.activity_type" :image="rightGoods.img"
						:title="rightGoods.name" :subtitle="rightGoods.caption?rightGoods.caption:''" :price="rightGoods.price"
						:originPrice="((rightGoods.price-rightGoods.cost)*rightGoods.rebate/100).toFixed(2)"
						:sales="rightGoods.sales" 
						@click="$Router.push({ path: '/pages/goods/detail', query: { id: rightGoods.id } })"
						v-if="rightGoods.type!='EXCHANGE'">
					</ljshop-goods-card>
				</view>
			</view>
		</view>
		<view class="x-c" style="width: 100%;">
			<u-loadmore v-show="hasmore" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		</view>
	</view>
</template>

<script>
	/**
	 * 自定义之为你推荐
	 * @property {Object} detail - 推荐商品信息
	 */

	export default {
		components: {

		},
		data() {
			return {
				page: 0,
				total: 0, //总商品数
				perPage: 0, //单页商品数
				goodsList: [],
				isRefresh: true,

				// 瀑布流 350-330
				addTime: 0, //排序间隙时间
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				rebate: 40,
				hasmore: true,
				title: '',
				currentPage: 0,
				loadStatus: 'loadmore',
				isAdding:false



			};
		},

		props: {
			detail: {
				type: Object,
				default: () => {}
			}
		},
		created() {
			this.getGoodsList()
			uni.$on('uOnReachBottom', data => {
				
				if(!this.isAdding){
					if (this.hasmore) {
						this.currentPage += 1;
						this.getGoodsList();
					}
				}
				
			});

		},

		methods: {
			async splitData() {

				if (!this.tempList.length) {
					this.isAdding=false
				};
				if(this.tempList.length==1){
					this.isAdding = false
				}
				let item = this.tempList[0];
				if (!item) return;
				// 分左右
				if (this.leftHeight < this.rightHeight) {
					this.leftHeight += 330;
					item.subsidy = ((item.price - item.cost) * this.rebate / 100).toFixed(2);
					this.leftList.push(item);
				} else if (this.leftHeight > this.rightHeight) {
					this.rightHeight += 330;
					item.subsidy = ((item.price - item.cost) * this.rebate / 100).toFixed(2);
					this.rightList.push(item);
				} else {
					this.leftHeight += 330;
					this.leftList.push(item);
				}

				// 移除临时列表的第一项，如果临时数组还有数据，继续循环
				this.tempList.splice(0, 1);
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}
			},
			clear() {
				this.leftList = [];
				this.rightList = [];
				this.leftHeight = 0;
				this.rightHeight = 0;
			},
			getGoodsList() {
				let that = this;
					this.isAdding=true
				that.$http('common.cartRecom', {

				}).then(res => {
				 
					if (res.code == 1) {
						
						that.rebate = res.rebate;
						that.title = res.theme
						that.goodsList = res.productList;
						that.tempList = res.productList;
						that.goodsList.concat(res.product)
						that.tempList.concat(res.product)
						that.goodsList.length && that.splitData();
					} else {
						that.hasmore = false
					}
				});
			},

		}
	};
</script>

<style lang="scss">
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	.u-waterfall {
		@include vue-flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.u-column {
		@include vue-flex;
		flex: 1;
		flex-direction: column;
		height: auto;
	}

	.u-image {
		width: 100%;
	}

	// 为你推荐
	.hot-goods {
		//background: #ef3d57;

		.refresh-btn {
			margin-left: 50%;
			transform: translateX(-50%);
			width: 156rpx;
			line-height: 50rpx;
			background: #ffffff;
			border-radius: 25rpx;
			font-size: 22rpx;
			font-weight: 500;
			color: #999999;
			white-space: nowrap;
		}

		.refresh-active {
			transform: rotate(360deg);
			transition: all linear 0.5s;
		}
	}

	.sh-title-card {
		width: 720rpx;
	}

	.title-box {
		width: 710rpx;
		height: 88rpx;
		margin: 0 auto;
		position: relative;
		border-radius: 30rpx;

		.title-bg {
			width: 100%;
			height: 100%;
		}

		.title-text {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-weight: bold;
		}
	}
</style>